<template>
	<div class="file-tree">
		<div v-for="(item, index) in data" :key="index" class="file-item" :class="{ 'folder': item.isFolder }">
			<div class="file-header" @click="toggleExpand(item.id)" :class="{ 'expanded': isExpanded(item.id) }">
				<span v-if="item.isFolder" class="folder-icon">📁</span>
				<span v-else class="file-icon">📄</span>
				<span class="file-name" @click="showCode(item)">{{ item.name }}</span>
			</div>
			<div v-if="item.isFolder && isExpanded(item.id)" class="children">
				<FileTree :data="item.children" />
			</div>
		</div>
	</div>

</template>

<script setup>
import { ref } from 'vue'
import { getSignleFile } from '@/api/llm'
import { useHistoryStore } from '@/stores/history'
const historyStore = useHistoryStore()
const props = defineProps({
	data: {
		type: Array,
		required: true
	}
})


// 存储展开状态的对象
const expandedItems = ref({})

// 切换文件夹展开状态
const toggleExpand = (id) => {
	expandedItems.value[id] = !expandedItems.value[id]
}

// 检查文件夹是否展开
const isExpanded = (id) => {
	return expandedItems.value[id] || false
}
const showCode = async (item) => {
	historyStore.currentShowCode = await getSignleFile(historyStore.currentCode.fileNo, item.path.slice(6))

}
</script>

<style scoped>
.file-tree {
	font-family: 'Arial', sans-serif;
	padding: 10px;
	max-width: 400px;
}

.file-item {
	margin: 5px 0;
	padding: 5px;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.2s;
}

.file-item:hover {
	background-color: #ffffff;
}

.file-item.folder {
	color: #8b4513;
}

.file-item:not(.folder) {
	color: #006400;
}

.file-header {
	display: flex;
	align-items: center;
}

.folder-icon {
	margin-right: 8px;
}

.file-icon {
	margin-right: 8px;
}

.children {
	margin-left: 20px;
	padding-top: 5px;
}

.expanded .folder-icon::before {
	content: '▼';
	margin-right: 5px;
}

.expanded .folder-icon {
	font-weight: bold;
}

.file-name {
	flex-grow: 1;
}
</style>